<template>
    <div class="list wrapper" ref="wrapper">
        <div>
            <!-- 当前地区 -->
            <div class="area">
                <div class="title">当前地区</div>
                <div class="button-list-wrapper">
                    <div class="button-list">
                        <div class="button">
                            {{this.$store.state.city}}
                        </div>
                    </div>
                </div>
            </div>
            <!-- 热门 -->
            <div class="area">
                <div class="title">热门城市</div>
                <div class="button-list-wrapper">
                    <div class="button-list" v-for="item in hotCities" :key="item.id" @click="changeCurrentCity(item.name)">
                        <div class="button">
                            {{item.name}}
                        </div>
                    </div>
                </div>
            </div>
            <!-- 全部 -->
            <div class="area" v-for="(item,index) in cities" :key="index" :ref="index">
                <div class="title">{{index}}</div>
                <div class="item-list" v-for="item_child in item" :key="item_child.id" @click="changeCurrentCity(item_child.name)">
                    <div class="item">{{item_child.name}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import BScroll from '@better-scroll/core';

export default {
    name: "CityList",
    props:['hotCities','cities','letter'],
    mounted() {
        this.scroll = new BScroll(this.$refs.wrapper,{
            click:true,
        });
    },
    watch:{
        letter(){
            if(this.letter){
                const element = this.$refs[this.letter][0];
                this.scroll.scrollToElement(element);
            }
        }
    },
    methods:{
        changeCurrentCity(city_name){
            console.log(city_name);
            this.$store.dispatch('changeCity',city_name);    
            this.$router.push('/');
        }
    }
}
</script>
  
<style scoped>
.list {
    overflow: hidden;
    position: absolute;
    top: 1.56rem;
    left: 0;
    right: 0;
    bottom: 0;
}

.area {
    width: 100%;

    border-bottom: 1px solid #cccccc;
}

.area .title {
    line-height: .6rem;

    background-color: #eeeeee;
    color: #666666;

    padding-left: .2rem;
}

.area .button-list-wrapper {
    padding: .2rem;
    overflow: hidden;
}

.area .button-list-wrapper .button-list {
    width: 33.33%;
    float: left;
}

.area .button-list-wrapper .button-list .button {
    border: .02rem solid #ccc;
    padding: .2rem 0;
    margin: .2rem;
    text-align: center;
    color: #666666;

    border-radius: .02rem;
}

.area .item-list {
    width: 100%;
    z-index: 99999999999;
}

.area .item-list .item {
    line-height: .7rem;
    font-size: 0.3rem;
    border-bottom: 1px solid #dddded;
    padding: 0 .2rem;
    color: #666666;
}
</style>